<template>
    <view class="income tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">我的收益</tn-navbar>
        <view class="income-total tn-bg-main tn-flex-column">
            <view class="income-total-title tn-flex-1">
                总收益
            </view>
            <view class="income-total-value tn-flex-1">
                ￥{{ total }}
            </view>
        </view>
        <view class="income-list">
            <view class="income-list-title">
                <tn-icon class="tn-color-main" icon="circle-fill"></tn-icon>
                <view class="text">收入明细</view>
                <tn-icon class="tn-color-main" icon="circle-fill"></tn-icon>
            </view>
            <view class="income-list-item tn-flex-row" v-for="(income, index) in incomeList">
                <view class="item-left tn-flex-5 tn-flex-column">
                    <text><text class="title tn-color-main">售出：</text>服务费-￥{{ income.servicePrice }}</text>
                    <text>购入价：￥{{ income.buyPrice }} 售出价：￥{{ income.sellPrice }}</text>
                    <text>期数：{{ income.activityId }}</text>
                </view>
                <view class="item-right tn-flex-2 tn-color-main">+￥{{ income.profit }}</view>
            </view>

            <tn-empty :show="emptyIncomeList" mode="list"></tn-empty>
            <tn-load-more class="load-more" v-if="!emptyIncomeList" :status="loadingStatus"
                :load-tips-text="loadMoreTipsText"></tn-load-more>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import TnLoadMore from "@/tuniao-ui/components/tn-load-more/src/LoadMore.vue";
import { LoadMoreStatus } from "@/tuniao-ui/types/tn-load-more";
import { ResultEnum } from "@/enums/httpEnum";
import { findIncomePage, findIncomeTotal } from "@/api/income";
import { onReachBottom } from "@dcloudio/uni-app";
import { useUserStore } from "@/tuniao-ui/store/user";
import { navLogin } from "@/tuniao-ui/utils";
const userStore = useUserStore();
const isLogin = ref<boolean>(false);

const emptyIncomeList = ref(false);

const loadMoreTipsText = {
    loadmore: "上滑加载更多",
    loading: "正在加载中...",
    nomore: "没有更多数据了",
};
// 收益接口
interface IncomeVO {
    id: number;
    memberId: number;
    buyPrice: number;
    sellPrice: number;
    servicePrice: number;
    profit: number;
    rushPurchaseDetailId: number;
    activityId: string;
    createTime: string;
}
const total = ref(0);
const incomeList = ref<IncomeVO[]>([]);
const haveData = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

// 加载状态
const loadingStatus = ref<LoadMoreStatus>("loadmore");

function updateTotal() {
    findIncomeTotal().then((res) => {
        if (res.result) {
            total.value = res.result;
        }
    })
}

async function loadMoreIncome() {
    if (!haveData.value) {
    return;
  }
  loadingStatus.value = "loading";
  const { code, result } = await findIncomePage({
    current: currentPage.value,
    size: pageSize.value
  });
  if (code === ResultEnum.SUCCESS) {
    if (result.records.length < 1) {
      //loadingStatus.value = "nomore";
      console.log("没有更多数据了");
      haveData.value = false; // 标记无数据了
      if (currentPage.value === 1) {
        emptyIncomeList.value = true;
      }
    }
    incomeList.value = incomeList.value.concat(result.records);
    currentPage.value++;
  }
  loadingStatus.value = "nomore";
}

onMounted(() => {
    isLogin.value = userStore.isLogin();
    if (isLogin.value) {
        updateTotal();
        loadMoreIncome();
    } else {
        navLogin();
    }

    
});

// 页面刷到底部
onReachBottom(() => {
    loadMoreIncome();
});
</script>
  
<style lang="scss" scoped>
.income {
    &-total {
        height: 300rpx;
        font-size: 35rpx;

        &-title {
            justify-content: center;
            align-items: center;
        }

        &-value {
            justify-content: center;
        }
    }

    &-list {
        padding: 0 20rpx;

        &-title {
            height: 150rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 35rpx;

            .text {
                margin: 0 20rpx;
            }
        }

        &-item {
            margin-top: 20rpx;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10rpx;
            height: 200rpx;
            padding: 20rpx;

            .item-left {
                color: #999;
                justify-content: center;
                font-size: 27rpx;

                .title {
                    font-size: 35rpx;
                    font-weight: bold;
                }
            }

            .item-right {
                justify-content: center;
                align-items: center;
                font-size: 35rpx;
                font-weight: bold;
            }
        }
    }
}
</style>
  